<template>
    <div class="app-container">
        <div class="filter-container" ref="searchForm" v-if="false">
            <el-form :inline="true" :model="formData" class="search-form-inline" label-width="80px" size="small">
                <el-form-item label="终端客户名称">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="收货人">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-cascader
                        :options="options"
                        change-on-select
                        @active-item-change=""
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="平台审核状态">
                    <el-select v-model="formData.name" placeholder="请选择">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="formData.name" placeholder="请选择">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" size="small" @click="getListByPage">搜索</el-button>
            </el-form>
        </div>
        <search-form :searchArray="searchArray"></search-form>
        <el-table v-loading="listLoading" :data="dataInfo" :max-height="tableHeight" ref="mytable">
            <el-table-column label="终端客户" prop="name1" align="center"></el-table-column>
            <el-table-column label="用户名" prop="name2" align="center"></el-table-column>
            <el-table-column label="原收货信息" align="center" width="210">
                <template slot-scope="{row}">
                    <span v-html="row.name3"></span>
                </template>
            </el-table-column>
            <el-table-column label="申请变更收货信息" prop="name3" align="center" width="210">
                <template slot-scope="{row}">
                    <span v-html="row.name3"></span>
                </template>
            </el-table-column>
            <el-table-column label="变更证明" prop="name2" header-align="center" align="center">
                <template slot-scope="{row}">
                    <img clickable title="变更证明" :src="row.img" style="max-width: 50px;max-height: 70px"/>
                </template>
            </el-table-column>
            <el-table-column label="修改原因" prop="name2" align="center"></el-table-column>
            <el-table-column label="申请时间" prop="name2" align="center"></el-table-column>
            <el-table-column label="平台审核状态" prop="name2" align="center"></el-table-column>
            <el-table-column label="审核状态" prop="name2" align="center"></el-table-column>
            <el-table-column label="备注" prop="name2" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" size="mini" :disabled="row.status === '1'" @click="passDialog(row)">通过</el-button>
                    <el-button type="danger" size="mini" :disabled="row.status === '1'" @click="openNoPassDialog(row,$index)">不通过</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :currentPage.sync="formData.currentPage" :pageSize.sync="formData.pageSize" @pagination="getList"/>
        <!--不通过弹窗-->
        <el-dialog
            title="请填写不通过理由"
            :visible.sync="noPassDialog"
            width="30%">
            <el-input
                type="textarea"
                :rows="3"
                maxlength="50"
                show-word-limit
                resize="none"
                placeholder="请输入不通过理由"
                v-model="operationQuery.remark">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="noPassDialog = false">保存</el-button>
                <el-button @click="noPassDialog = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import { getWindowSize } from '@/utils'
    export default {
        name: 'addressModify',
        components: { Pagination },
        data() {
            return {
                searchArray: [
                    {
                        type:'input',
                        placeholder: '请输入终端客户名称',
                        value: '',
                        label: '终端客户名称',
                    },
                    {
                        type:'input',
                        placeholder: '请输入手机号',
                        value: '',
                        label: '手机号',
                    },
                    {
                        type:'input',
                        placeholder: '请输入用户名',
                        value: '',
                        label: '用户名',
                    },
                    {
                        type:'input',
                        placeholder: '请输入收货人',
                        value: '',
                        label: '收货人',
                    },
                     {
                        type: "select",
                        placeholder: "请选择收货地址",
                        filterable: false,
                        value: "",
                        width: '',
                        label: '收货地址',
                        list: [
                        {
                            label: "",
                            value: ""
                        }
                        ]
                    },
                    {
                        type: "select",
                        placeholder: "请选择平台审核状态",
                        filterable: false,
                        value: "",
                        width: '',
                        label: '平台审核状态',
                        list: [
                        {
                            label: "",
                            value: ""
                        }
                        ]
                    },
                    {
                        type: "select",
                        placeholder: "请选择审核状态",
                        filterable: false,
                        value: "",
                        width: '',
                        label: '审核状态',
                        list: [
                        {
                            label: "",
                            value: ""
                        }
                        ]
                    },
                ],
                formData: {
                    name: '1',
                    currentPage: 1,
                    pageSize: 10
                },
                options: [{
                    value: '1',
                    label: '浙江',
                    children: [{
                        value: '2',
                        label: '杭州',
                        children: [{
                            value: '3',
                            label: '西湖'
                        }]
                    }]
                }],
                options2: [{
                    value: 1, label: '合格'
                },{
                    value: 2, label: '不合格'
                },{
                    value: 3, label: '通过'
                }],
                listLoading: false,
                dataInfo: [],//表格数据
                total: 0,
                noPassDialog: false,//不通过弹窗是否显示
                currentRow: '',//当前选中行
                tableHeight: 0,
                operationQuery: {
                    id: '',
                    remark: ''
                }
            }
        },
        mounted() {
            this.getList()
            //表格高度自适应屏幕可见高度
            this.$nextTick(()=>{
                this.tableHeight = this.table.fullHeight(-50)
            })
            window.onresize = () => {
                this.tableHeight = this.table.fullHeight(-50)
            }
            //搜索绑定回车事件
            document.addEventListener("keyup", e => e.key==='Enter'?this.getListByPage():'')
        },
        methods: {
            /*获取表格数据*/
            getList() {
                this.dataInfo = [{
                    id: 1,
                    name1: '茶百道大药房1',
                    name2: '王小虎',
                    name3: '张三<br>12345678901<br>杭州市西湖区西溪花园翠竹苑',
                    status: '1',
                    img: require('@/assets/img/collapseLogo.png')
                },{
                    id: 2,
                    name1: '茶百道大药房2',
                    name2: '王小虎',
                    name3: '张三<br>12345678901<br>杭州市西湖区西溪花园翠竹苑',
                    status: '2',
                    img: require('@/assets/404_images/404.png')
                },{
                    id: 3,
                    name1: '茶百道大药房3',
                    name2: '王小虎',
                    name3: '张三<br>12345678901<br>杭州市西湖区西溪花园翠竹苑',
                    status: '2',
                    img: require('@/assets/404_images/404.png')
                },{
                    id: 4,
                    name1: '茶百道大药房4',
                    name2: '王小虎',
                    name3: '张三<br>12345678901<br>杭州市西湖区西溪花园翠竹苑',
                    status: '2',
                    img: require('@/assets/404_images/404.png')
                }]
            },
            getListByPage(){
                this.getList(this.formData.currentPage)
            },
            /*点击不通过*/
            openNoPassDialog(row,$index) {
                this.noPassDialog = true
                this.operationQuery.id = row.id
            },
            /*通过*/
            passDialog() {
                let _this=this;
                this.$confirm('您确认要通过该地址修改吗？', '提示').then(() => {
                    console.log(222)
                }).catch(() => {
                    console.log(11)
                })
            },
        },
        activated(){
            this.$nextTick(()=>{
                this.$refs.mytable.doLayout()
            })
        }
    }
</script>

<style scoped lang="scss">
.app-container {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>
